﻿<%@ page language="java" contentType="text/html; charset=UTF-8"
         pageEncoding="UTF-8" %>
<%
    String path = request.getContextPath();
    String basePath = request.getScheme() + "://"
            + request.getServerName() + ":" + request.getServerPort()
            + path + "/";
%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>CIS-MSP</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport"
          content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <link rel="stylesheet" href="<%=request.getContextPath()%>/huazhi/lib/layui-v2.5.5/css/layui.css" media="all">
    <link rel="stylesheet" href="<%=request.getContextPath()%>/huazhi/css/admin.css" media="all">
    <link rel="stylesheet" href="<%=request.getContextPath()%>/huazhi/css/public.css" media="all">
    <link rel="shortcut icon" href="<%=request.getContextPath()%>/huazhi/images/favicon.ico"/>
    <link rel="stylesheet" href="<%=request.getContextPath()%>/huazhi/css/way/iconfont.css">
    <link rel="stylesheet" href="<%=request.getContextPath()%>/huazhi/css/tubiao/iconfont.css">
    <link rel="stylesheet" href="<%=request.getContextPath()%>/huazhi/css/extension/way/iconfont.css">
</head>
<body>
<div class="layui-fluid">
    <div class="layui-row layui-col-space15">
        <div class="layui-col-md12">
            <div class="layui-card">
                <div class="layui-card-body">
                    <div id="container" style="height: 700px;"></div>
                </div>
            </div>
        </div>
    </div>
</div>
<script src="<%=request.getContextPath()%>/huazhi/lib/layui-v2.5.5/layui.js"></script>
<script src="<%=request.getContextPath()%>/huazhi/lib/jquery-3.4.1/jquery-3.4.1.min.js"></script>
<script type="text/javascript" src="https://webapi.amap.com/maps?v=1.4.12&key=b51f3248d9ad4e26ad1841c5a558f596"></script>
<script>
    layui.use([ 'form', 'laydate'], function () {
        var $ = layui.$
            , form = layui.form
            , laydate = layui.laydate
            , layer = layui.layer;


        $(function () {
            var map = new AMap.Map('container', {
                resizeEnable: true,
                center: [109.509597, 18.773616],//设置地图中心点坐标
                zoom: 11, //设置地图显示的缩放级别
                viewMode: '2D',  //设置地图模式
                lang: 'zh_cn',  //设置地图语言类型

            });

            window.setTimeout(function () {
                addCloudLayer(map)
            }, 100)
        });

        function makeTable(Lineds) {
            var ul = '<li><div class="layui-col-md5" style="padding:9px 15px;">'
            ul += '<span style="color: #000;line-height: 20px;font-size: 14px;min-height: 20px;">' + Lineds.cun + '</span></div>'
            ul += '<div class="layui-col-md4" style="padding:9px 15px;" >'
            ul += '<span style="color: #000;line-height: 20px;font-size: 14px;min-height: 20px;">' + Lineds.reason + '</span></div>'
            ul += '<div class="layui-col-md3"  style="padding:9px 15px;">'
            ul += '<a href="javascript:;" onclick=openCCTV("' + Lineds.videotid + '","' + Lineds.videoUrl + '","' + Lineds.cun + '");><span style="color: #000;line-height: 20px;font-size: 14px;min-height: 20px;">查看视频</span></a></div></li>'
            $('#bigUl').prepend(ul)
        }

        function details(cun, videotid, videoUrl, cunTid) {
            layer.open({
                title: "实时监控-" + cun,
                type: 2,
                area: ['100%', '100%'],
                content: '<%=request.getContextPath()%>/rest/getRoute?type=home&url=sewage_info',
                shade: 0.8,
                anim: 4,
                skin: 'layui-layer-molv',
                resize: true,
                move: false,
                maxmin: true,
                success: function (layero, index) {  //当你需要在层创建完毕时即执行一些语句，可以通过该回调 想相当于吧值转到子界面
//                    var body = layer.getChildFrame('body',index);//建立父子联系  //当你试图在当前页获取iframe页的DOM元素时，你可以用此方法。
//                    alert(videoTid+" "+videoUrl)
//                    body.find("#videoTid").val(videoTid);
//                    body.find("#videoUrl").val(videoUrl);
                    var iframe = window['layui-layer-iframe' + index];
                    iframe.child(videotid, videoUrl,cun, cunTid);

                }
            });


        }
        function openCCTV(videotid, videoUrl, cun) {
            layer.open({
                title: "实时监控-" + cun,
                type: 2,
                area: ['100%', '100%'],
                content: '<%=request.getContextPath()%>/huazhi/js/lay-module/OpenCctv.jsp',
                shade: 0.8,
                anim: 4,
                skin: 'layui-layer-molv',
                resize: true,
                move: false,
                maxmin: true,
                success: function (layero, index) {  //当你需要在层创建完毕时即执行一些语句，可以通过该回调 想相当于吧值转到子界面
                    var iframe = window['layui-layer-iframe' + index];
                    iframe.child(videotid, videoUrl);
                }
            });
        }
        function addCloudLayer(map) {
            $.ajax({
                type: "post",
                url: "<%=request.getContextPath()%>/rest/smoke/getLinedAll",
                dataType: "json",
                async: false,
                success: function (res) {
                    if (res.data != null) {
                        var Lineds = res.data
                        for (var i = 0; i < Lineds.length; i++) {
                            var oneLined = Lineds[i]
                            var redOrGreen = ''
                            // if (oneLined.state == 0) {
                            //     redOrGreen = 'Green2.png'
                            // } else {
                            //     redOrGreen = 'Red3.gif'
                            //     makeTable(oneLined)
                            // }
                            console.log(oneLined)
                            if (oneLined.state == 2) {
                                redOrGreen = 'Red3.gif'
                                makeTable(oneLined)
                            } else if(oneLined.state == 4){
                                redOrGreen = 'Ty.png'
                                makeTable(oneLined)
                            }else {
                                redOrGreen = 'Zc.png'
                                makeTable(oneLined)
                            }
                            var oneMaker = new AMap.Marker({
                                icon: "<%=request.getContextPath()%>/huazhi/images/point" + redOrGreen,
                                map: map,
                                position: [oneLined.jingdu, oneLined.weidu],
//                position:[116.397428, 39.90923],
                                clickable: true,
                            });
                            // 设置label标签
                            // label默认蓝框白底左上角显示，样式className为：amap-marker-label
                            oneMaker.setLabel({
                                offset: new AMap.Pixel(0, 0),  //设置文本标注偏移量
                                content: "<div class='info'>" + oneLined.cun + "</div>", //设置文本标注内容
                                direction: 'bottom' //设置文本标注方位
                            });
                            var _onClick = function (e) {
                                details(oneLined.cun, oneLined.videotid, oneLined.videoUrl, oneLined.tid);
                            }
                            AMap.event.addListener(oneMaker, 'click', _onClick);
                        }
                    }
                }
            })


        }
    });
</script>
</body>
</html>

